<template>
	<view class="container">
		<view class="success-header">
			<text class="success-title">
				<image
					src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3976.svg"
					mode="" class="success-title-image"></image>
				支付成功
			</text>
			<view class="buttons">
				<button class="button" @click="goHome">返回首页</button>
				<button class="button" @click="viewOrder">查看订单</button>
			</view>
		</view>
		<view class="reward">
			<view class="coupon">
				<text class="coupon-title">
					<span>无门槛</span>
					<p>5 元</p>
				</text>
				<view class="coupon-button">
					<view class="coupon-button-text">
						<p class="coupon-subtitle">新人奖励红包</p>
						<p class="coupon-info">有效期至长期</p>
					</view>
					<button class="button-two" @click="claimCoupon">立即领取</button>
				</view>
			</view>
		</view>

		<view class="recommend-title">为 / 您 / 推 / 荐</view>
		<view class="recommendations">
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-0.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">故宫博物馆</text>
					<text class="item-rating">5A 4.7分 5632人评价</text>
					<view class="item-view">
						<text class="item-distance">距您1.2km</text>
						<text class="item-price">¥40起</text>
					</view>
				</view>
			</view>
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-1.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">八达岭长城</text>
					<text class="item-rating">5A 4.7分 17532人评价</text>
					<view class="item-view">
						<text class="item-distance">距您4.9km</text>
						<text class="item-price">¥35起</text>
					</view>

				</view>
			</view>
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-2.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">香山公园</text>
					<text class="item-rating">4A 4.7分 15748人评价</text>
					<view class="item-view">
						<text class="item-distance">距您7.0km</text>
						<text class="item-price">¥10起</text>
					</view>

				</view>
			</view>
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-3.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">白塔寺</text>
					<text class="item-rating">4A 4.7分 5632人评价</text>
					<view class="item-view">
						<text class="item-distance">距您2.3km</text>
						<text class="item-price">免费预约</text>
					</view>

				</view>
			</view>
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-4.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">湖广会馆</text>
					<text class="item-rating">4A 4.5分 15848人评价</text>
					<view class="item-view">
						<text class="item-distance">距您3.6km</text>
						<text class="item-price">免费预约</text>
					</view>

				</view>
			</view>
			<view class="recommend-item">
				<view class="item-image">
					<image
						src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u3981-5.svg"
						mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">北京古代建筑博物馆</text>
					<text class="item-rating">4.7分 17532人评价</text>
					<view class="item-view">
						<text class="item-distance">距您900m</text>
						<text class="item-price">免费</text>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	function goHome() {
		uni.switchTab({
			url:"/pages/index/index"
		})
	}

	function viewOrder() {
		uni.navigateTo({
			url:'/pagesA/ticketOrders/order/order'
		})
	}
</script>

<style>
	.container {
		padding: 16px;
	}

	.success-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 16px;
	}

	.success-title {
		font-size: 24px;
		font-weight: bold;
		color: #4caf50;
	}

	.success-title-image {
		height: 20px;
		width: 20px;
	}


	.buttons {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 8px;
	}

	.button {
		width: 80px;
		font-size: 12px;
		border-radius: 20px;
		border: 1px solid #cfcfcf;
	}

	.button-two {
		width: 80px;
		font-size: 12px;
		background: #ff4d4f;
		color: white;
	}

	.reward {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 16px;
	}

	.coupon {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background-color: #ff4d4f; */
		color: white;
		/* padding: 16px; */
		border-radius: 8px;
	}

	.coupon-title {
		font-size: 20px;
		font-weight: bold;
		background: #ff4d4f;
		padding: 20px;
		border-radius: 5px 0px 0px 5px;
	}

	.coupon-button {
		flex: 1;
		background: white;
		color: black;
		display: flex;
		align-items: center;
		padding: 20px;
		border-radius: 0px 5px 5px 0px;
	}

	.coupon-title span {
		font-size: 12px;
	}

	.coupon-subtitle {
		font-size: 18px;
		margin-top: 4px;
	}

	.coupon-info {
		font-size: 12px;
		margin-top: 4px;
	}

	.recommendations {
		margin-top: 16px;
		display: flex;
		flex-wrap: wrap;
	}

	.recommend-title {
		width: 100%;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
		text-align: center;
	}

	.recommend-item {
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	.item-image image {
		width: 100%;
		height: 100%;
	}

	.item-image {
		width: 100%;
		height: 170px;
		margin-right: 8px;
		border-radius: 4px;
		overflow: hidden;
	}

	.item-info {
		width: 95%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-name {
		font-size: 16px;
		font-weight: bold;
	}

	.item-view {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.item-rating,
	.item-distance,
	.item-price {
		font-size: 14px;
	}

	.item-price {
		color: #ff4d4f;
	}
</style>